<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>部门管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div style="margin-bottom: 15px;">
                <el-row>
                    <el-col :span="2">
                        <div>
                            <el-button type="success" size="small" icon="el-icon-circle-plus-outline"
                                       @click="dialogFormVisible = true">添加员工
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="7" :offset="15">
                        <div>
                            <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div></div>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;">
                    <el-table-column
                            align="center"
                            prop="username"
                            label="登录名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="trueName"
                            label="员工名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            width="80"
                            align="center"
                            prop="gender"
                            label="性别">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="100"
                            prop="role"
                            label="角色">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="100"
                            prop="departmentId"
                            label="部门">
                    </el-table-column>
                    <el-table-column
                            width="150"
                            align="center"
                            prop="created"
                            label="注册时间">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="家庭住址">
                    </el-table-column>
                    <el-table-column
                            width="100"
                            prop="status"
                            align="center"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    @change="changeStatus(scope.row.status,scope.row.id)"
                                    :active-value="true"
                                    :inactive-value="false"
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    icon="el-icon-edit"
                                    type="primary"
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">开除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 15px;float: right;" v-if="fyShow">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 50,100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background>
                </el-pagination>
                <div style="clear:both;"></div>
            </div>
        </div>

        <el-dialog title="添加员工" :visible.sync="dialogFormVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="form">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="80px">
                    <el-input v-model="form.password" autocomplete="off" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="角色" label-width="80px">
                    <el-select v-model="form.role" placeholder="请选择角色">
                        <el-option label="员工" value="0"></el-option>
                        <el-option label="管理员" value="1"></el-option>
                        <el-option label="超级管理员" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUser">确 定</el-button>
                <el-button @click="dialogFormVisible = false;">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑用户" :visible.sync="dialogEditVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="updateUserDate">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="updateUserDate.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" label-width="80px">
                    <el-input v-model="updateUserDate.trueName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="80px">
                    <el-radio v-model="updateUserDate.gender" label="0">男</el-radio>
                    <el-radio v-model="updateUserDate.gender" label="1">女</el-radio>
                </el-form-item>

                <el-form-item label="密码" label-width="80px">
                    <el-input v-model="updateUserDate.password" autocomplete="off" type="password"
                              placeholder="无需修改则不填写此项"
                              show-password></el-input>
                </el-form-item>

                <el-form-item label="家庭住址" label-width="80px">
                    <el-input v-model="updateUserDate.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色" label-width="80px">
                    <el-select v-model="updateUserDate.roleId" placeholder="请选择角色">
                        <el-option label="员工" value="0"></el-option>
                        <el-option label="管理员" value="1"></el-option>
                        <el-option label="超级管理员" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="部门" label-width="80px">
                    <el-select v-model="updateUserDate.department" placeholder="请选择部门">
                        <el-option :label="item.department" :value="item.departmentId"
                                   v-for="item in department"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateUser">确 定</el-button>
                <el-button @click="dialogEditVisible = false;">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import MainTitle from "@/components/MainTitle";
    import {
        getAllUser,
        deleteUserById,
        addUser,
        getUserById,
        updateUserById,
        changeStatusById, fuzzyQuery, getAllDepartment
    } from "@/api/admin/department";

    export default {
        name: "Member",
        components: {
            MainTitle
        },
        mounted() {
            getAllDepartment().then(resp => {
                this.department = resp.data;
                this.getAllUser(this.currentPage, this.pageSize);
            });
        },
        data() {
            return {
                searchValue: "",
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                fyShow: true,
                dialogFormVisible: false,
                dialogEditVisible: false,
                form: {
                    username: '',
                    password: '',
                    role: '0',
                },
                updateUserDate: {
                    id: '',
                    username: '',
                    trueName: '',
                    gender: '',
                    password: '',
                    address: '',
                    roleId: '',
                    department: '',
                },
                department: [],
            }
        },
        methods: {
            search() {
                if (this.searchValue == "") {
                    this.$message.info("请输入！");
                    return false;
                }
                fuzzyQuery(this.searchValue).then(resp => {
                    if (resp.data) {
                        this.tableData = resp.data;
                        this.tableData.forEach(value => {
                            value.status = value.status == 0 ? true : false;
                            if (value.departmentId == 0) {
                                value.departmentId = "无部门"
                            } else {
                                this.department.forEach(v => {
                                    if (v.departmentId == value.departmentId) {
                                        value.departmentId = v.department
                                    }
                                })
                            }
                        })
                        this.fyShow = false;
                    }
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.updateUserDate.id = row.id;
                getUserById(row.id).then(resp => {
                    console.log(resp.data);
                    this.updateUserDate.username = resp.data.username;
                    this.updateUserDate.trueName = resp.data.trueName;
                    this.updateUserDate.password = "";
                    this.updateUserDate.address = resp.data.address;
                    this.updateUserDate.roleId = resp.data.role;
                    this.updateUserDate.department = resp.data.departmentId;
                    if (resp.data.gender == "男") {
                        this.updateUserDate.gender = "0";
                    } else {
                        this.updateUserDate.gender = "1";
                    }
                    this.dialogEditVisible = true;
                })
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.deleteUser(row.id);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getAllUser(1, val);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getAllUser(val, this.pageSize);
            },
            getAllUser(c, p) {
                getAllUser(c, p).then(resp => {
                    this.currentPage = resp.data.current;
                    this.total = resp.data.total;
                    this.tableData = resp.data.user;
                    this.tableData.forEach(value => {
                        value.status = value.status == 0 ? true : false;
                        if (value.departmentId == 0) {
                            value.departmentId = "无部门"
                        } else {
                            this.department.forEach(v => {
                                if (v.departmentId == value.departmentId) {
                                    value.departmentId = v.department
                                }
                            })
                        }

                    })
                })
            },
            addUser() {
                addUser(this.form.username, this.form.password, this.form.role).then(resp => {
                    console.log(resp)
                    if (resp.code === 0) {
                        this.$message.success("添加成功！");
                        this.getAllUser(this.currentPage, this.pageSize);
                        this.dialogFormVisible = false;
                        this.form.username = "";
                        this.form.password = "";
                    } else {
                        this.$message.error("添加失败：" + resp.msg);
                    }
                });
            },
            updateUser() {
                let user = this.updateUserDate;
                let roleStr = this.updateUserDate.roleId;
                if ("员工" === roleStr) {
                    user.roleId = 0;
                } else if ("管理员" === roleStr) {
                    user.roleId = 1;
                } else if ("超级管理员" === roleStr) {
                    user.roleId = 2;
                }

                updateUserById(user).then(resp => {
                    console.log(resp);
                    if (resp.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getAllUser(this.currentPage, this.pageSize);
                        this.dialogEditVisible = false;
                    } else {
                        this.$message({
                            type: 'error',
                            message: '修改失败!'
                        });
                    }
                })
            },
            deleteUser(id) {
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteUserById(id).then(resp => {
                        console.log(resp);
                        if (resp.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getAllUser(this.currentPage, this.pageSize);
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            changeStatus(status, id) {
                let s = status ? "0" : "1";
                changeStatusById(id, s).then(resp => {
                    console.log(resp);
                    if (resp.code == 0) {
                        if (s == 0) {
                            this.$message({
                                type: 'success',
                                message: "已启用!"
                            });
                        } else {
                            this.$message({
                                type: 'info',
                                message: "已禁用!"
                            });
                            this.$notify({
                                title: '警告',
                                message: '已禁用该用户，届时将不能正常登录！',
                                type: 'warning'
                            });
                        }

                    } else {
                        this.$message({
                            type: 'error',
                            message: '操作失败!'
                        });
                    }
                })
            }
        },
        watch: {
            searchValue(nv, ov) {
                if ("" == nv) {
                    this.getAllUser(this.currentPage, this.pageSize);
                    this.fyShow = true;
                }
            }
        }
    }
</script>

<style scoped>

</style>